<template>
  <div>
    <div v-show="true">
      <el-button style="float: right; padding: 3px 0" type="text" @click="getPtps">刷新</el-button>
      <el-table
          :data="ptps"
          :row-class-name="tableRowClassName"
          @cell-click="tabClick"
          @cell-dblclick="handleClick"
          @row-dblclick="toPtp"
          visEdit="true">

        <el-table-column
            type="index"
            width="50">
        </el-table-column>

        <el-table-column
            property="name"
            label="名称"
            sortable
            width="300px">
        </el-table-column>

        <el-table-column
            width="auto"
            property="statePac.operationalState"
            label="工作状态">
        </el-table-column>

        <el-table-column
            width="150"
            property="layer-protocol-name"
            label="协议层名称">
        </el-table-column>

        <el-table-column
            property="supportedLayerProtocolName"
            label="支持协议">
          <template slot-scope="scope">
          <span v-for="(i,key) in scope.row.supportedLayerProtocolName" :key="key">{{ i }}
            <el-divider direction="vertical" v-if="key!==scope.row.supportedLayerProtocolName.length-1"></el-divider>
          </span>
          </template>
        </el-table-column>

        <el-table-column
            width="auto"
            property="statePac.adminState"
            label="管理状态">

          <template slot-scope="scope">
            <div @dblclick="changeEnddate(scope.$index,'adminState', scope.row)" style="height: 40px;line-height: 40px;">
              <span v-show="!scope.row.is_show_tag1">{{ scope.row.statePac.adminState }}</span>
              <el-input :ref='"enddateinput"+"statePac.adminState"+"&"+scope.$index'
                        @blur="switchShow(scope.$index,'adminState')"
                        clearable @keyup.enter.native="$event.target.blur"
                        v-show="scope.row.is_show_tag1" size="mini"
                        v-model="scope.row.statePac.adminState">
              </el-input>
            </div>
          </template>

        </el-table-column>

        <el-table-column
            width="auto"
            property="laserStatus"
            label="激光器状态">
          <template slot-scope="scope">
            <div @dblclick="changeEnddate(scope.$index,'laserStatus', scope.row)" style="height: 40px;line-height: 40px;">
              <span v-show="!scope.row.is_show_tag1">{{ scope.row.laserStatus }}</span>
              <el-input :ref='"enddateinput"+"laserStatus"+"&"+scope.$index' @blur="switchShow(scope.$index,'laserStatus')"
                        clearable @keyup.enter.native="$event.target.blur" v-show="scope.row.is_show_tag1" size="mini"
                        v-model="scope.row.laserStatus"></el-input>
            </div>
          </template>
        </el-table-column>
        <!--          <el-table-column width="150" property="ctp" label="ctp" sortable></el-table-column>-->
      </el-table>
    </div>
    <div v-show="false">

      <MMtest/>
    </div>
  </div>

</template>

<script>
import axios from "axios";
import MMtest from "@/components/test/MMtest";

export default {
  name: "BatchConfigPtp",
  components: {
    MMtest,
  },
  data() {
    return {
      //双击修改数据相关
      row:'',
      col:'',
      tmpRow:{},

      nodeName: "",
      tabClickIndex:'',
      tabClickLabel:'',
      ptps: [
        {
          "interface-type": "UNI",
          "laserStatus": "laserOn",
          name: "端口-1",
          "layer-protocol-name": "ETH",
          supportedLayerProtocolName: ["ETH", "ODU", "SDH"],
          "loop-back": "内环回",
          statePac: {
            adminState: "enabled",
            operationalState: "down",
          },
        },
        {
          "interface-type": "UNI",
          "laserStatus": "laserOn",
          name: "端口-2",
          "layer-protocol-name": "ETH",
          supportedLayerProtocolName: ["ETH", "SDH"],
          "loop-back": "内环回",
          statePac: {
            adminState: "enabled",
            operationalState: "down",
          },
        },
        {
          "interface-type": "NNI",
          "laserStatus": "laserOff",
          name: "端口-3",
          "layer-protocol-name": "ODU",
          supportedLayerProtocolName: ["ETH", "ODU", "SDH"],
          "acc-eth:eth-ptp-pac": {
            "mac-address": "00:00:00:00:00:00",
            "current-working-mode": "auto",
            "pause-control": true,
            "lldp-enable": false,
            "current-mtu": 1518,
          },
          "loop-back": "外环回",
          statePac: {
            adminState: "enabled",
            operationalState: "down",
          },
        },
        {
          "interface-type": "NNI",
          "laserStatus": "laserOff",
          name: "端口-4",
          "layer-protocol-name": "SDH",
          supportedLayerProtocolName: ["ETH", "ODU", "SDH"],
          "acc-eth:eth-ptp-pac": {
            "mac-address": "00:00:00:00:00:00",
            "current-working-mode": "auto",
            "pause-control": true,
            "lldp-enable": false,
            "current-mtu": 1518,
          },
          "loop-back": "外环回",
          statePac: {
            adminState: "enabled",
            operationalState: "down",
          },
        },
        {
          "interface-type": "NNI",
          "laserStatus": "laserOff",
          name: "端口-5",
          "layer-protocol-name": "SDH",
          supportedLayerProtocolName: ["ETH", "ODU", "SDH"],
          "acc-eth:eth-ptp-pac": {
            "mac-address": "00:00:00:00:00:00",
            "current-working-mode": "auto",
            "pause-control": true,
            "lldp-enable": false,
            "current-mtu": 1518,
          },
          "loop-back": "外环回",
          statePac: {
            adminState: "enabled",
            operationalState: "down",
          },
        },
        {
          "interface-type": "UNI",
          "laserStatus": "laserOn",
          name: "端口-6",
          "layer-protocol-name": "ODU",
          supportedLayerProtocolName: ["ETH", "ODU", "SDH"],
          "acc-eth:eth-ptp-pac": {
            "mac-address": "00:00:00:00:00:00",
            "current-working-mode": "auto",
            "pause-control": true,
            "lldp-enable": false,
            "current-mtu": 1518,
          },
          "loop-back": "外环回",
          statePac: {
            adminState: "enabled",
            operationalState: "down",
          },
        },
      ],
    };
  },
  methods: {

    toPtp(row, column, event){

      console.log('当前行数据： ',row)
      this.$router.push({
        name:'PTP',
        params:{
          name:row.name,
          protocol:row['layer-protocol-name']
        }
      });
    },

    // 切换input框的显示状态
    switchShow(index, tag, tmp_this = this) {
      // 因为涉及到调用不同名称的变量, 不清楚怎么写, 只能先用switch case解决
      switch (tag) {
        case "laserStatus":
          tmp_this.ptps[index].is_show_tag1 = !tmp_this.ptps[index].is_show_tag1;
          break;
        case "adminState":
          tmp_this.ptps[index].is_show_tag2 = !tmp_this.ptps[index].is_show_tag2;
          break;
          // ...
      }
      tmp_this.ptps = [...tmp_this.ptps];//因为我table绑定的表格数据是后接过来赋值的，所以需要这步操作，如果没有1、2步骤这个可以不加。后面也一样
    },

    // 显示input框, 使光标焦点当前input框
    changeEnddate(index, tag, rowdata) {
      console.log('----------------')
      console.log(index,tag,rowdata)
      console.log('----------------')
      this.switchShow(index, tag, this);
      // console.log('enddateinput' + index, typeof 'enddateinput' + index);
      // console.log(rowdata, typeof rowdata);
      setTimeout(() => {  //定时器是为了避免没有获取到dom的情况报错，所以象征性的给1毫秒让他缓冲
        this.$refs['enddateinput' + tag + '&' + index].focus()
        //el-input的autofocus失效，所以用这个方法。对应在template里的refs绑定值
      }, 1)
    },


    handleClick({row, column, cell, event}) {

      console.log(row, column);
      console.log(cell, event);

    },
    getPtps() {
      axios.get("/node/" + this.nodeName + "/ptps").then(
          (response) => {
            console.log("请求成功", response.data);
            this.ptps = response.data;
            // response.data;
          },
          (error) => {
            console.log("失败！", error.message);
          }
      );
    },
    tableRowClassName ({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    // tabClick row 当前行 column 当前列
    tabClick (row, column, cell, event) {
      console.log(cell,event);
      switch (column.label) {
        case '管理状态':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
      console.log('tabClick', this.tabClickIndex, row.adName, row.adSort)
    },
    // 失去焦点初始化
    inputBlur (row) {
      // console.log('row', row)
      this.tabClickIndex = null
      this.tabClickLabel = ''
    }
  },
  mounted() {
    this.$bus.$on("node-name", (data) => {
      console.log("PTP - node : ", data);
      this.nodeName = data;
    });
  },
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>